<template>
	<view>
		<uni-row class="uni-row" :gutter="gutter" :width="nvueWidth">
			<uni-col :span="4">
				<view style=" padding: 10% 0;"><uni-icons class="uni-row-icon" size="30" type="left"><text
							class="uni-col-text ">返回</text></uni-icons></view>
			</uni-col>
			<uni-col :span="20">
				<view>
					<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus"
						@input="input" @cancel="cancel" @clear="clear">
					</uni-search-bar>

				</view>
			</uni-col>
			<!-- 	<uni-col :span="4">
								<view ></view>
							</uni-col> -->
		</uni-row>
	</view>
</template>

<script>
	export default {
		name: "navBar",
		data() {
			return {
				searchValue: '123123'
			};
		},
		methods: {
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			input(res) {
				console.log('----input:', res)
			},
			clear(res) {
				uni.showToast({
					title: 'clear事件，清除值为：' + res.value,
					icon: 'none'
				})
			},
			blur(res) {
				uni.showToast({
					title: 'blur事件，输入值为：' + res.value,
					icon: 'none'
				})
			},
			focus(e) {
				uni.showToast({
					title: 'focus事件，输出值为：' + e.value,
					icon: 'none'
				})
			},
			cancel(res) {
				uni.showToast({
					title: '点击取消，输入值为：' + res.value,
					icon: 'none'
				})
			}
		},
		onBackPress() {
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
		}
	}
</script>

<style lang="scss">
	.uni-row {}

	.uni-col-text {

		font-size: 0.5em;
	position:relative;
	top: -8px;

	}

	.uni-row-icon {
		margin: auto;
		position:relative;
		top: 8px;
	}
</style>